<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="./CSS/style.css" />
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
    <title>Hello World</title>
    <!-- <link rel="stylesheet" hr/ef="CSS/font-awesome.min.css"11 /> -->
  </head>
  <body>
    <div id="ah">
      <img
        src="https://image0.lietou-static.com/bg_white_192x192/6371d7aa64ae7150b5a9edad05u.png"
        alt="this is a img"/>
        <h4 id="welcomeContent">欢迎    Admin</h4>
      <p>安时商用储能</p>      
    </div>
    <div class="controlArea">
      <div class="controlAreaButton">
        <button class="YX">遥信</button>
        <button class="YC">遥测</button>
        <button class="YK">遥控</button>
        <button class="YT">遥调</button>
      </div>
    </div>
    <div class="content">
      
    </div>
    <div class="munu">
      <ul>       
          <h1 id="munuName">菜单</h1>     
        <li>
          <input type="checkbox" name="item" id="item1"/><label for="item1">实时数据<i class="fa fa-caret-right"></i></label>
          <ol>
            <li id="device11" onclick="ChangeStyle(this)">设备一</li>
            <li id="device12" onclick="ChangeStyle(this)">设备二</li>
            <li id="device13" onclick="ChangeStyle(this)">设备三</li>
          </ol>
        </li>
        <li>
          <button id="return" onclick="funReturn()">注销</button>
        </li>
      </ul>
    </div>
    <div id="content">
      
    <div class="clearfix"></div>       
  </body>
  <!-- 引入jquery的核心js文件，如果未引入jquery,则报错：$ is not defined -->

  <script type="text/javascript">
    //定义内容容器和初始内容
      let contentContainer;
      contentContainer= $(".content");

      //定义内容映射
      let contentMap;
      contentMap = {
        // 编辑class="YX"的内容：
         YC: `
         <h2>遥测</h2>
      <table border="1px" id="myTable">
        <tr class="header">
            <th style="width:33.3%;">Name</th>
            <th style="width:33.3%;">Value</th>
            <th style="width:33.3%;">Time</th>
          </tr>
        <tr>
          <td id="name1"></td>
          <td id="value1"></td>
          <td id="time1"></td>
          </tr>
          <tr>
          <td id="name2"></td>
          <td id="value2"></td>
          <td id="time2"></td>
          </tr>
          <tr>
          <td id="name3"></td>
          <td id="value3"></td>
          <td id="time3"></td>
          </tr>
      </table>
      `,
        YX: `
        <h2>遥信</h2>
      <table border="1px" id="myTable">
        <tr class="header">
          <th style="width:33.3%;">index</th>
            <th style="width:33.3%;">Name</th>
              <th style="width:33.3%;">bool</th>
        </tr>
        <tr>
          <td>1</td>
          <td id="name1"></td>
          <td id="bool1"></td>
        </tr>
        <tr>
          <td>2</td>
          <td id="name2"></td>
          <td id="bool2"></td>
        </tr>
        <tr>
          <td>3</td>
          <td id="name3"></td>
          <td id="bool3"></td>
          </tr>
        </table>
      `,
        YK: `<h2>可登录开发者账号更改</h2>`,
        YT: `<h2>可登录开发者账号更改</h2>`,
      };
      // 全局变量，用来记录当前选中的设备(根据设备号)
      var currentDevice = "";

      function funReturn(){
          window.location.href = "./";
      }

      //YC
      function getNameValueTimeFromData() {
        $.ajax({
          url: "./static/data.json",
          dataType: "json",
          success: function (data) {
            //更新表格内容
            //循环便利data.json里面的数据展示在表格上面
          const selectedData = data.find(item => item.device === currentDevice);
          // console.log(selectedData);   可以检查是否接收到了数据没点击前是undefined，点击后就是相对应device的data了
          if(selectedData && selectedData.data){
            for(let i=0,j=1;i<selectedData.data.length;i++,j++){
            $("#name"+j).text(selectedData.data[i].name);
            $("#value"+j).text(selectedData.data[i].value);
            // 获取当前时间
            $("#time"+j).text(new Date().toLocaleString());
           }
           // $('#name1').text(data[0].name);
            // $('#value1').text(data[0].value);
            // $('#name2').text(data[1].name);
            // $('#value2').text(data[1].value);
            // $('#name3').text(data[2].name);
            // $('#value3').text(data[2].value);
          }else{
            console.log("没有收到预期的数据YC");
          }
           
            
          },
        });
      }

      //YX
      function getNameBool() {
        $.ajax({
          url: "./static/data.json",
          dataType: "json",
          success: function (data) {
            const selectedData = data.find(item => item.device === currentDevice);
            if(selectedData && selectedData.data){
            //更新表格内容
            //循环便利data.json里面的数据展示在表格上面
            for(let i=0,j=1;i<selectedData.data.length;i++,j++) {
               $("#name" + j).text(selectedData.data[i].name);
              $("#bool" + j).text(selectedData.data[i].value != 0 ? "true" : "false");
            }
          }else{
            console.log("没有收到预期的数据YX");
          }
          },
        });
      }


      //以上代码整个代码可用，是全局变量
    $(document).ready(function () {
      $(document).ready(function () {
        const itemsPerPage = 3;
        let currentPage = 1;
      });

      
      //每秒刷新表格内容
      setInterval(function () {
        //更新时间
        const currentTime = new Date().toLocaleTimeString();
        $("#time1").text(currentTime);
        $("#time2").text(currentTime);
        $("#time3").text(currentTime);

        //更新Name和Value
        getNameValueTimeFromData();
        getNameBool();
      }, 1000);

      // YK
// function updateDataInJson() {
//   $.ajax({
//     url: "./js/data.json",
//     type: "PUT",
//     data: JSON.stringify(data),
//     contentType: "application/json",
//     success: function (res) {
//       console.log("更新成功");
//     },
//     error: function (err) {
//       console.error("更新失败");
//     },
//   });
// }
      });
      window.addEventListener("load", () =>{
        // 获取打开按钮
        const open11 = document.querySelector("#device11");
        const open12 = document.querySelector("#device12");
        const open13 = document.querySelector("#device13");

        // 获取这一块区域
        const fillScreen = document.querySelector(".controlArea");
        // 做打开功能
        open11.addEventListener("click", () => {
          // 打开
          fillScreen.style.display = "block";
        });
        open12.addEventListener("click", () => {
          // 打开
          fillScreen.style.display = "block";
        });
        open13.addEventListener("click", () => {
          // 打开
          fillScreen.style.display = "block";
        });
        
      });
   
      $(".YC").click(function () {
        contentContainer.html(contentMap["YC"]);
        getNameValueTimeFromData(); //初始化内容
      });
      $(".YX").click(function () {
        contentContainer.html(contentMap["YX"]);
        getNameBool(); //初始化内容
      });
      $(".YK").click(function () {
        contentContainer.html(contentMap["YK"]);
        
      });
      $(".YT").click(function () {
        contentContainer.html(contentMap["YT"]);
       
      });

      $("#device11").click(function(){
        contentContainer.html(contentMap["YX"]);
        getNameBool(); //初始化内容
      })
      $("#device12").click(function(){
        contentContainer.html(contentMap["YX"]);
        getNameBool(); //初始化内容
      })
      $("#device13").click(function(){
        contentContainer.html(contentMap["YX"]);
        getNameBool(); //初始化内容
      })

      // 绑定点击事件,更新全局变量
      document.getElementById("device11").onclick = function () {
        currentDevice = "01";
      };
      document.getElementById("device12").onclick = function () {
        currentDevice = "02";
      };
      document.getElementById("device13").onclick = function () {
        currentDevice = "03"; 
      };

      //将点击的菜单项突显为活动状态，同时取消其他菜单项的活动状态
      function ChangeStyle(element){
        var menuItems = document.querySelectorAll('.munu li');
        menuItems.forEach(function(item){
          item.classList.remove('active');
        });
        element.classList.add('active');

      }
  </script>
</html>
